<template>
	<div>
        <div class="attr-line" v-for="(attr,i) in goodsAttrs" :key="attr.name">
            <p class="attr-title">{{attr.name}}</p>
            <div class="attr-item-container">
                <span class="attr-item" v-for="(item, lIndex) in attr.list"
                :key="lIndex"
                :class="{active: isActive(item.attribute_id, i),
                disabled: isNotAvailable(item.attribute_id, i)}"
                @click="clickAttr(item, i)">
                    {{item.attribute_value}}
                </span>
            </div>
        </div>
        <div class="attr-line clear">
            <p class="attr-line fl">购买数量</p>
            <NumEditor class="fr"
                :num="num" :min="1" :max="goodsDetail.stock"
				@numMinus="numChange(num--)" @numAdd="numChange(num++)"></NumEditor>
        </div>
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import NumEditor from '@/components/NumEditor'
import { Indicator } from 'mint-ui'
export default{
    name:'GoodsAttr',
    created(){
       console.log(this.preGoodsId)
    },
    data(){
        return {
            selectedAttrs: [],
            num: 1
        }
    },
    computed:{
        ...mapGetters({
            goodsAttrs: 'goods/goodsAttrs',
            goodsDetail: 'goods/goodsDetail',
        })
    },
    methods:{
        ...mapActions({
            getGoodsAttrs: 'goods/getGoodsAttrs',
            getGoodsId: 'goods/getGoodsId',
        }),
        // 该选项是否选中
        isActive(id, index){
            if(!this.selectedAttrs[index]) return false
            return this.selectedAttrs[index].attribute_id == id
        },
        // 该选项是否可选
        isNotAvailable(id, index){
            // matchedAttr表示对于当前标签而言 应进行匹配的另一个标签
            // 还好一共只准有两组标签。这样当选中第二行（index==1）的标签，那么第一行
            // 被选中的标签就是matchedAttr，由selectedAttrs[0]获得。反之亦然。
            // 以后还是将得到的数据预处理下为好。现在得到的配对数据都是string，也不大好用。
            const len = this.goodsAttrs.length - 1
            const matchedAttr = this.selectedAttrs[len - index]
            if(len === 0) return false
            else {
                if(!matchedAttr) return false
                return matchedAttr.availableMatches.indexOf(id.toString()) == -1
            }
        },
        async clickAttr(attr, attrIndex){
            if(this.isNotAvailable(attr.attribute_id, attrIndex)) return
            // 给selectedAttrs赋值 第一行的赋位置0 第二行的赋位置一
            const temp = JSON.parse(JSON.stringify(this.selectedAttrs))
            temp[attrIndex] = attr
            this.selectedAttrs = temp
            console.log(`已选属性: ${this.selectedAttrs.map(a => a.attribute_id).toString()}`)
            // 为避免[empty, 第二行attr]的情况 需剔除空值
            if(this.selectedAttrs.filter(a => a).length === this.goodsAttrs.length) {
                Indicator.open()
                this.goodsId = await this.getGoodsId({
                    preGoodsId: this.preGoodsId,
                    attrIds: this.selectedAttrs.map(a => a.attribute_id).toString()
                })
                this.triggerEmit()
                Indicator.close()
            }
        },
        numChange(){
             this.triggerEmit()
        },
        triggerEmit(){
            // 该组件传给父级的所有内容
            this.$emit('change', {
                    goodsId: this.goodsId,
                    attrs: [...this.selectedAttrs],
                    num: this.num,
                    canAddCart: true
            })
        }
    },
    model:{
       prop: 'selected',
	   event: 'change'
    },
    props: ['preGoodsId'],
    components: {NumEditor}
}
</script>
<style lang='less' scoped>
.attr-line{
    margin-bottom: .2rem;
    font-size: .37rem;
}
.attr-item-container{
    margin-top: .15rem;
}
.attr-item{
    font-size: .37rem;
    padding: .05rem .25rem;
    margin-right: .2rem;
    border-radius: 0.37rem;
    color: #393939;
    background: #e7e7e7;
    display: inline-block;
    margin-bottom: .15rem;
    &.active{
        color: #fff;
        background: #fb4a4a;
    }
}
</style>
<style>
.mint-indicator-wrapper{
    z-index: 1000;
}
</style>
